<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- initial-scale 初始缩放  -->
    <!-- device-width 设备宽度 -->
    <meta name="viewport" content="width=device-width, initial-scale=2.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        /* 屏幕小于 750px */
        @media screen and (max-width: 750px) {
            div{
                width: 150px;
                height: 150px;
                background-color: green;
            }
        }
        /* 大于750px 小于1200px */
        @media (min-width: 750px) and (max-width:1200px){
            div{
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
        }
        /* 大于1200px */
        @media screen and (min-width:1200px) {
            div{
                width: 500px;
                height: 500px;
                background: pink;
            }
            body{
                background-color: aqua;
            }
        }
    </style>
</head>
<body>
    <!-- 
        http://192.168.123.123:5500/2502/07%E7%A7%BB%E5%8A%A8%E7%AB%AF/%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2/01%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2%E5%86%99%E6%B3%95.html

     -->
     <!-- 媒体查询:
            css3引入的一种技术,在满足特定的情况下,显示不同的样式
    -->
    <div></div>
</body>
</html>